<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
		</style>
	</head>

	<body>
		<form>
			<input type="text" name="city" id="city" value="101180301"/>
			<input type="submit" value="查询" />
		<h1></h1>	
		<p class="suggest"></p>
		</form>
		<section class="today">
		</section>
		<section class="yesterday">
			
		</section>
	</body>

</html>
<script>
	document.forms[0].onsubmit = function(ev) {
		ev.preventDefault();
		//1.创建对象
		var httpxml = new XMLHttpRequest();
        //.判断状态操作数据
		httpxml.onreadystatechange = function() {
			if(httpxml.readyState == 4) {
               var data=httpxml.responseText;
               var data=JSON.parse(data);   //字符串转换成json对象
               console.log(data);
               console.log(data.data.city);
               var today=data.data.forecast;
               var yesterday=data.data.yesterday;
               console.log(data.data.ganmao);
               var result="";
               for(var i=0;i<today.length;i++){
               	result+="<div>";
               	result+="<h1>"+	today[i].date+"</h1>"
               	result+="<p>风力:"+today[i].fengli+"</p>"
               	result+="<p>风向:"+today[i].fengxiang+"</p>"
               	result+="<p>"+today[i].high+"</p>"
               	result+="<p>"+today[i].low+"</p>"
               	result+="<p>"+today[i].type+"</p>"
               	result+="</div>";
               }
               document.querySelector("h1").innerHTML=data.data.city;
               document.querySelector(".today").innerHTML=result;
               document.querySelector(".suggest").innerHTML=data.data.ganmao;
               document.querySelector(".yesterday").innerHTML="<div><h1>"+ yesterday.date+"</h1><p>"+ yesterday.fl+"</p><p>"+ yesterday.fx+"</p><p>"+
               yesterday.high+"</p><p>"+ yesterday.low+"</p><p>"+ yesterday.type+"</p></div>";
			}
		}
		//参数
		var param=document.querySelector("#city").value;
		var url='http://wthrcdn.etouch.cn/weather_mini?citykey='+param;
		httpxml.open("GET",url);
		httpxml.send();
	}
</script>